<template>
  <div id="presetting">
      <el-transfer
          v-model="modelChkList"
          :data="modelList"
          filterable
          :titles="['Supported', 'Release']"
          :button-texts="['Remove model', 'Add model']"
          style="margin-top: 1.5em; margin-bottom: 1.5em"
          @change="handleListChange">
      </el-transfer>
  </div>

</template>

<script>

export default {
  name: "Presetting",
  mounted() {
  },
  data() {
    return {
      modelChkList: []
    };
  },
  methods: {
    handleListChange: function (current, direction, changed) {
      this.$store.commit("setSelectedModelList", this.modelChkList)
      if (direction === 'right') {
        this.$store.commit("initModelSettingList", changed)
        this.$store.dispatch('fetchRemoteModelDetailList')
      } else {
        this.$store.commit('resetModelSettingList', changed)
        this.$store.dispatch('removeModelDetailList', changed)
      }
    }
  },
  computed: {
    modelList: function () {
      const data = [];
      for (let m of this.$store.state.model.modelList) {
        data.push({
          key: m,
          label: m,
        })
      }
      return data;
    }
  }
}
</script>

<style scoped>
  #presetting {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    background: white;
  }

  .el-transfer {
    text-align: left;
    display: inline-block;
  }

  .hw-btn {
    margin-left: 150px;
  }

</style>